import { useState } from "react";
import { Button, Card, Space, Input, message } from "antd";

const UseComponent = () => {
	// 使用传统的 useState Hook
	const [count, setCount] = useState(0);
	const [inputValue, setInputValue] = useState("");
	const [items, setItems] = useState<string[]>([]);

	// 传统的事件处理函数
	const handleIncrement = () => {
		setCount(count + 1);
	};

	const handleDecrement = () => {
		setCount(count - 1);
	};

	const handleAddItem = () => {
		if (inputValue.trim()) {
			setItems([...items, inputValue]);
			setInputValue("");
			message.success("添加成功！");
		} else {
			message.warning("请输入内容");
		}
	};

	const handleRemoveItem = (index: number) => {
		setItems(items.filter((_, i) => i !== index));
		message.info("删除成功！");
	};

	return (
		<div className="card content-box">
			<h2>UseComponent - 传统组件开发方式</h2>

			{/* 计数器示例 */}
			<Card title="计数器 Demo" style={{ marginBottom: 16 }}>
				<div style={{ textAlign: "center" }}>
					<h3>当前计数: {count}</h3>
					<Space>
						<Button type="primary" onClick={handleIncrement}>
							增加
						</Button>
						<Button onClick={handleDecrement}>减少</Button>
						<Button danger onClick={() => setCount(0)}>
							重置
						</Button>
					</Space>
				</div>
			</Card>

			{/* 列表管理示例 */}
			<Card title="列表管理 Demo">
				<div style={{ marginBottom: 16 }}>
					<Space>
						<Input
							placeholder="输入内容"
							value={inputValue}
							onChange={e => setInputValue(e.target.value)}
							onPressEnter={handleAddItem}
							style={{ width: 200 }}
						/>
						<Button type="primary" onClick={handleAddItem}>
							添加
						</Button>
					</Space>
				</div>

				<div>
					<h4>列表内容 ({items.length} 项):</h4>
					{items.length === 0 ? (
						<p style={{ color: "#999" }}>暂无数据</p>
					) : (
						<ul style={{ paddingLeft: 20 }}>
							{items.map((item, index) => (
								<li key={index} style={{ marginBottom: 8 }}>
									<span>{item}</span>
									<Button size="small" danger style={{ marginLeft: 8 }} onClick={() => handleRemoveItem(index)}>
										删除
									</Button>
								</li>
							))}
						</ul>
					)}
				</div>
			</Card>

			{/* 说明文字 */}
			<Card title="开发方式说明" style={{ marginTop: 16 }}>
				<div style={{ color: "#666" }}>
					<p>
						<strong>传统组件特点:</strong>
					</p>
					<ul>
						<li>✅ 直接在组件内使用 useState</li>
						<li>✅ 事件处理函数写在组件内部</li>
						<li>✅ 逻辑和UI混合在一起</li>
						<li>✅ 适合简单的状态管理</li>
					</ul>
					<p>
						<strong>适用场景:</strong> 简单的交互组件，状态逻辑不复杂
					</p>
				</div>
			</Card>
		</div>
	);
};

export default UseComponent;
